<template>
  <div>
    <svg t="1525763956514" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3196" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
      <path xmlns="http://www.w3.org/2000/svg" d="M813.3 722.7L684.9 594.3l-90.5 90.5 128.4 128.4 45.2-45.3-128.1 128.2h256.5V639.5zM429.4 684.8l-90.5-90.5-128.4 128.3-82.6-82.7v255.8h255.7L255.3 767.4l45.7 45.7zM338.6 429l90.5-90.5-127.8-127.8-45.7 45.7 128.6-128.7H127.9v256.5l82.9-83zM594.6 338.5l90.5 90.5 126.6-126.6 83.2 83.3v-257H638l127.5 127.5-44.3-44.3z" p-id="4674"/>
    </svg>
  </div>
</template>

<script>
import screenfull from "screenfull";

export default {
  name: "screenfull",
  props: {
    width: {
      type: Number,
      default: 22
    },
    height: {
      type: Number,
      default: 22
    },
    fill: {
      type: String,
      default: "#48576a"
    }
  },
  data() {
    return {
      isFullscreen: false
    };
  },
  methods: {
    click() {
      if (!screenfull.enabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
    }
  }
};
</script>

<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
</style>
